@{    ViewData["Title"] = "患者详情";}

<style>
    /* 全局样式 */
    body {
        font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        color: #333;
        background-color: #f5f7fa;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /* 主容器 */
    .patient-detail-container {
        display: flex;
        min-height: 100vh;
        position: relative;
    }

    /* 左侧功能菜单 - 固定位置 - 优化宽度 */
    .side-menu {
        width: 150px;
        background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
        color: white;
        padding: 15px 0;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        z-index: 100;
    }

    .menu-header {
        padding: 0 12px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 10px;
    }

    .menu-header h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        letter-spacing: 1px;
    }

    .menu-item {
        padding: 10px 12px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 3px solid transparent;
        display: flex;
        align-items: center;
        font-size: 13px;
        position: relative;
        overflow: hidden;
    }

    .menu-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: rgba(52, 152, 219, 0.1);
        transition: width 0.3s ease;
    }

    .menu-item:hover::before {
        width: 100%;
    }

    .menu-item:hover {
        background-color: rgba(52, 152, 219, 0.15);
        border-left-color: #3498db;
        transform: translateX(2px);
    }

    .menu-item.active {
        background-color: rgba(52, 152, 219, 0.2);
        border-left-color: #3498db;
        font-weight: 600;
        box-shadow: inset 0 0 10px rgba(52, 152, 219, 0.3);
    }

    .menu-icon {
        margin-right: 8px;
        font-size: 14px;
        min-width: 16px;
        text-align: center;
    }

    /* 右侧内容区域 - 若依风格优化 */
    .content-area {
        flex: 1;
        margin-left: 150px; /* 左侧菜单宽度 */
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: calc(100% - 150px); /* 确保占满剩余空间 */
        max-width: none; /* 移除最大宽度限制 */
    }

    /* 头部信息 - 固定位置 - 若依风格优化 */
    .patient-header {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        border-bottom: 3px solid #3498db;
        padding: 8px 15px; /* 减小内边距 */
        margin: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        position: sticky;
        top: 0;
        z-index: 50;
        flex-shrink: 0;
    }

    .header-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .header-title h2 {
        margin: 0;
        font-size: 24px;
        color: #2c3e50;
    }

    .header-actions {
        display: flex;
        gap: 10px;
    }

    .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .btn-default {
        background-color: #ecf0f1;
        color: #2c3e50;
    }

    .btn-default:hover {
        background-color: #bdc3c7;
    }

    .patient-basic-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .info-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .info-label {
        font-size: 11px;
        color: #95a5a6;
        margin-bottom: 3px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-value {
        font-size: 15px;
        font-weight: 600;
        color: #2c3e50;
    }

    /* 标签导航 */
    .tabs {
        background: white;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .tab-nav {
        display: flex;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }

    .tab-item {
        padding: 15px 25px;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .tab-item:hover {
        background-color: #e9ecef;
    }

    .tab-item.active {
        border-bottom-color: #3498db;
        background-color: white;
        font-weight: 600;
        color: #3498db;
    }

    /* 数据显示区域 */
    .tab-content {
        padding: 15px;
    }

    /* 数据表格 */
    .data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .data-table th {
        background-color: #f8f9fa;
        padding: 12px;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid #e9ecef;
    }

    .data-table td {
        padding: 12px;
        border-bottom: 1px solid #e9ecef;
    }

    .data-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    /* 卡片容器 - 若依风格优化 */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 10px; /* 适当增加间距 */
        margin-bottom: 10px;
    }

    .data-card {
        background: white;
        border-radius: 6px;
        padding: 12px 15px; /* 优化内边距 */
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;
        border: 1px solid #e6e9ed;
    }

    .data-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .card-action {
        color: #3498db;
        font-size: 14px;
        cursor: pointer;
    }

    .card-action:hover {
        text-decoration: underline;
    }

    /* 图表区域样式 - 若依风格优化 */
        .charts-container {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .charts-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px; /* 适当增加行间距 */
            gap: 10px; /* 适当增加卡片间距 */
        }

        .chart-card {
            flex: 1;
            border: 1px solid #e6e9ed;
            border-radius: 6px;
            overflow: hidden;
            background-color: #ffffff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .chart-card:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }

        .chart-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 8px 12px; /* 减小内边距 */
            border-bottom: 2px solid #3498db;
        }

        .chart-header h4 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.3px;
        }

        .header-icon {
            stroke: #ff7f50;
            margin-right: 6px;
        }

        .chart-content {
            padding: 10px; /* 减小内边距 */
            background-color: #fafbfc;
        }

        /* 生命体征图表样式 */
        .vital-signs-chart, .ventilator-chart {
            height: 160px;
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .chart-grid {
            display: flex;
            height: 100%;
            gap: 10px;
        }

        .chart-item {
            flex: 1;
            position: relative;
        }

        .chart-label {
            font-size: 12px;
            margin-bottom: 5px;
            color: #666;
        }

        .chart-data {
            height: 150px;
        }

        .chart-axis {
            display: flex;
            height: 100%;
        }

        .y-axis {
            width: 30px;
            font-size: 10px;
            color: #999;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: right;
            padding-right: 5px;
        }

        .chart-lines {
            flex: 1;
            position: relative;
            height: 100%;
            border-bottom: 1px solid #e0e0e0;
        }

        .chart-lines {
            flex: 1;
            position: relative;
            height: 100%;
            border-bottom: 1px solid #e0e0e0;
        }

        .line-chart-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .chart-axis-text {
            position: absolute;
            right: 5px;
            top: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 10px;
            color: #999;
            text-align: right;
        }

        /* 表格样式 */
        .medication-table, .lab-test-table {
            height: 160px;
            overflow-y: auto;
            font-size: 12px;
        }

        .table-row {
            display: flex;
            padding: 6px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .table-cell {
            flex: 1;
            padding: 2px 0;
            color: #333;
        }

        /* 加载动画 */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 内容淡入动画 */
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }

        @@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

    .content-display {
        box-sizing: border-box;
    }

    .content-display * {
        box-sizing: border-box;
    }

    /* 优化表格样式 */
    .data-table {
        margin: 0;
    }

    /* 优化标签页样式 */
    .tabs {
        margin: 0 0 10px 0;
    }

    /* 响应式布局优化 */
    @@media (max-width: 1400px) {
        .charts-row {
            flex-wrap: wrap;
        }

        .chart-card {
            min-width: calc(50% - 5px);
        }
    }

    @@media (max-width: 768px) {
        .side-menu {
            width: 60px;
        }

        .content-area {
            margin-left: 60px;
            width: calc(100% - 60px);
        }

        .menu-header h3 {
            font-size: 10px;
        }

        .menu-item {
            font-size: 11px;
            padding: 8px 6px;
        }

        .chart-card {
            min-width: 100%;
        }

        .content-display {
            padding: 8px 10px !important;
        }

        .patient-header {
            padding: 6px 10px;
        }
    }

    /* 滚动条样式优化 */
    .content-display::-webkit-scrollbar {
        width: 8px;
    }

    .content-display::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .content-display::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    .content-display::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

</style>

<div class="patient-detail-container">
    <!-- 左侧功能菜单 -->
    <div class="side-menu">
        <div class="menu-header">
            <h3>ICU 病人详情</h3>
        </div>
        <div class="menu-items">
            <div class="menu-item active">
                首页
            </div>
            <div class="menu-item">
                监护数据
            </div>
            <div class="menu-item">
                皮肤
            </div>
            <div class="menu-item">
                导管
            </div>
            <div class="menu-item">
                护理记录单
            </div>
            <div class="menu-item">
                护理文书
            </div>
            <div class="menu-item">
                体温单
            </div>
            <div class="menu-item">
                重症评分
            </div>
            <div class="menu-item">
                预警信息
            </div>
            <div class="menu-item">
                收费单明细
            </div>
            <div class="menu-item">
                每日质控
            </div>
        </div>
    </div>
    <!-- 右侧内容区域 -->
    <div class="content-area">
        <!-- 患者基本信息 -->
        <div class="patient-header">
            <div class="patient-basic-info" style="display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%;">
                <div class="info-item" style="display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; min-width: 120px;">
                    <span class="info-label">床位号</span>
                    <span id="patientBedNo" class="info-value">--</span>
                </div>
                <div class="info-item" style="display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; min-width: 120px;">
                    <span class="info-label">患者姓名</span>
                    <span id="patientName" class="info-value">--</span>
                </div>
                <div class="info-item" style="display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; min-width: 150px;">
                    <span class="info-label">住院号</span>
                    <span id="patientInHosNo" class="info-value">--</span>
                </div>
                <div class="info-item" style="display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; min-width: 150px;">
                    <span class="info-label">入科时间</span>
                    <span id="patientInDateTime" class="info-value">--</span>
                </div>
                <div class="info-item" style="display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; min-width: 120px;">
                    <span class="info-label">主任医生</span>
                    <span id="patientChiefDoctor" class="info-value">--</span>
                </div>
                <div class="info-item" style="display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; min-width: 120px;">
                    <span class="info-label">护士</span>
                    <span id="patientChargeNurse" class="info-value">--</span>
                </div>
            </div>
        </div>

        <!-- 内容显示区域 - 若依风格优化 -->
        <div class="content-display" style="flex: 1; overflow-y: auto; padding: 10px 15px; width: 100%; max-width: none; margin: 0;">
            <!-- 首页内容默认显示 -->
            <div id="homeContent">
                <div class="charts-row">
                    <!-- 出入量图表 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>出入量</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ventilator-chart">
                            <svg width="100%" height="100%" viewBox="0 0 400 200">
                                <!-- X轴 -->
                                <line x1="50" y1="180" x2="350" y2="180" stroke="#e0e0e0" stroke-width="1"/>
                                <!-- Y轴 -->
                                <line x1="50" y1="180" x2="50" y2="20" stroke="#e0e0e0" stroke-width="1"/>

                                <!-- Y轴刻度 -->
                                <text x="45" y="185" text-anchor="end" font-size="10" fill="#999">-600</text>
                                <text x="45" y="140" text-anchor="end" font-size="10" fill="#999">-300</text>
                                <text x="45" y="95" text-anchor="end" font-size="10" fill="#999">0</text>
                                <text x="45" y="50" text-anchor="end" font-size="10" fill="#999">300</text>
                                <text x="45" y="5" text-anchor="end" font-size="10" fill="#999">600</text>
                                <text x="45" y="-30" text-anchor="end" font-size="10" fill="#999">900</text>

                                <!-- X轴刻度 -->
                                <text x="85" y="195" text-anchor="middle" font-size="10" fill="#999">0.5</text>
                                <text x="135" y="195" text-anchor="middle" font-size="10" fill="#999">1</text>
                                <text x="185" y="195" text-anchor="middle" font-size="10" fill="#999">1.5</text>
                                <text x="235" y="195" text-anchor="middle" font-size="10" fill="#999">2</text>
                                <text x="285" y="195" text-anchor="middle" font-size="10" fill="#999">2.5</text>
                                <text x="335" y="195" text-anchor="middle" font-size="10" fill="#999">3</text>

                                <!-- 入量柱状图 -->
                                <rect x="70" y="40" width="30" height="55" fill="#4a90e2"/>
                                <rect x="170" y="70" width="30" height="25" fill="#4a90e2"/>
                                <rect x="270" y="40" width="30" height="55" fill="#4a90e2"/>

                                <!-- 出量柱状图 -->
                                <rect x="120" y="95" width="30" height="80" fill="#ff6b6b"/>
                                <rect x="220" y="110" width="30" height="65" fill="#ff6b6b"/>
                                <rect x="320" y="135" width="30" height="40" fill="#ff6b6b"/>

                                <!-- 合计线 -->
                                <path d="M 85,115 L 120,135 L 170,90 L 220,140 L 270,115 L 320,150" fill="none" stroke="#8bc34a" stroke-width="3"/>

                                <!-- 合计区域填充 -->
                                <path d="M 85,115 L 120,135 L 170,90 L 220,140 L 270,115 L 320,150 L 320,180 L 85,180 Z" fill="#e8f5e9" opacity="0.5"/>

                                <!-- 数据标签 -->
                                <text x="85" y="35" text-anchor="middle" font-size="12" fill="#333">750</text>
                                <text x="120" y="90" text-anchor="middle" font-size="12" fill="#333">85</text>
                                <text x="170" y="65" text-anchor="middle" font-size="12" fill="#333">85</text>
                                <text x="220" y="105" text-anchor="middle" font-size="12" fill="#333">500</text>
                                <text x="270" y="35" text-anchor="middle" font-size="12" fill="#333">750</text>
                                <text x="320" y="130" text-anchor="middle" font-size="12" fill="#333">300</text>

                                <!-- 合计线数据点 -->
                                <circle cx="85" cy="115" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                                <circle cx="120" cy="135" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                                <circle cx="170" cy="90" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                                <circle cx="220" cy="140" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                                <circle cx="270" cy="115" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>
                                <circle cx="320" cy="150" r="4" fill="#8bc34a" stroke="#fff" stroke-width="1"/>

                                <!-- 图例 -->
                                <rect x="300" y="15" width="15" height="10" fill="#4a90e2"/>
                                <text x="320" y="23" font-size="10" fill="#333">入量</text>
                                <rect x="300" y="30" width="15" height="10" fill="#ff6b6b"/>
                                <text x="320" y="38" font-size="10" fill="#333">出量</text>
                                <line x1="300" y1="50" x2="315" y2="50" stroke="#8bc34a" stroke-width="3"/>
                                <text x="320" y="53" font-size="10" fill="#333">合计</text>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- 生命体征图表 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>生命体征</h4>
                    </div>
                    <div class="chart-content">
                        <div class="vital-signs-chart">
                            <div class="chart-grid">
                                <!-- 心率 -->
                                <div class="chart-item">
                                    <div class="chart-label">心率</div>
                                    <div class="chart-data">
                                        <div class="chart-axis">
                                            <div class="y-axis">
                                                <div>160</div>
                                                <div>140</div>
                                                <div>120</div>
                                                <div>100</div>
                                                <div>80</div>
                                                <div>60</div>
                                                <div>40</div>
                                                <div>20</div>
                                                <div>0</div>
                                            </div>
                                            <div class="chart-lines">
                                                <svg width="100%" height="100%" class="line-chart-svg" viewBox="0 0 100 80">
                                                    <path d="M 5,20 L 15,18 L 25,15 L 35,16 L 45,13 L 55,15 L 65,14 L 75,15 L 85,16 L 95,14"
                                                          fill="none" stroke="#888" stroke-width="1"/>
                                                    <!-- 数据点 -->
                                                    <circle cx="5" cy="20" r="1.5" fill="#888"/>
                                                    <circle cx="15" cy="18" r="1.5" fill="#888"/>
                                                    <circle cx="25" cy="15" r="1.5" fill="#888"/>
                                                    <circle cx="35" cy="16" r="1.5" fill="#888"/>
                                                    <circle cx="45" cy="13" r="1.5" fill="#888"/>
                                                    <circle cx="55" cy="15" r="1.5" fill="#888"/>
                                                    <circle cx="65" cy="14" r="1.5" fill="#888"/>
                                                    <circle cx="75" cy="15" r="1.5" fill="#888"/>
                                                    <circle cx="85" cy="16" r="1.5" fill="#888"/>
                                                    <circle cx="95" cy="14" r="1.5" fill="#888"/>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 血压 -->
                                <div class="chart-item">
                                    <div class="chart-label">血压</div>
                                    <div class="chart-axis-text">
                                        <div>200-30-100</div>
                                        <div>160-24-60</div>
                                        <div>120-18-60</div>
                                        <div>80-12-40</div>
                                        <div>40-6-20</div>
                                        <div>0-0-0</div>
                                    </div>
                                    <div class="chart-lines">
                                        <svg width="100%" height="100%" class="line-chart-svg" viewBox="0 0 100 80">
                                            <path d="M 5,30 L 15,28 L 25,26 L 35,29 L 45,25 L 55,27 L 65,26 L 75,27 L 85,28 L 95,26"
                                                  fill="none" stroke="#999" stroke-width="1"/>
                                            <!-- 数据点 -->
                                            <circle cx="5" cy="30" r="1.5" fill="#999"/>
                                            <circle cx="15" cy="28" r="1.5" fill="#999"/>
                                            <circle cx="25" cy="26" r="1.5" fill="#999"/>
                                            <circle cx="35" cy="29" r="1.5" fill="#999"/>
                                            <circle cx="45" cy="25" r="1.5" fill="#999"/>
                                            <circle cx="55" cy="27" r="1.5" fill="#999"/>
                                            <circle cx="65" cy="26" r="1.5" fill="#999"/>
                                            <circle cx="75" cy="27" r="1.5" fill="#999"/>
                                            <circle cx="85" cy="28" r="1.5" fill="#999"/>
                                            <circle cx="95" cy="26" r="1.5" fill="#999"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <!-- 第二行：呼吸机和医嘱用药 -->
            <div class="charts-row">
                <!-- 呼吸机图表 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>呼吸机</h4>
                    </div>
                    <div class="chart-content">
                        <div class="ventilator-chart">
                            <svg width="100%" height="100%" viewBox="0 0 400 200">
                                <!-- X轴 -->
                                <line x1="50" y1="180" x2="350" y2="180" stroke="#e0e0e0" stroke-width="1"/>
                                <!-- Y轴 -->
                                <line x1="50" y1="180" x2="50" y2="20" stroke="#e0e0e0" stroke-width="1"/>

                                <!-- Y轴刻度 -->
                                <text x="45" y="185" text-anchor="end" font-size="10" fill="#999">0</text>
                                <text x="45" y="135" text-anchor="end" font-size="10" fill="#999">10</text>
                                <text x="45" y="85" text-anchor="end" font-size="10" fill="#999">20</text>
                                <text x="45" y="35" text-anchor="end" font-size="10" fill="#999">30</text>
                                <text x="45" y="-15" text-anchor="end" font-size="10" fill="#999">40</text>
                                <text x="45" y="-65" text-anchor="end" font-size="10" fill="#999">50</text>

                                <!-- X轴刻度 -->
                                <text x="85" y="195" text-anchor="middle" font-size="10" fill="#999">18</text>
                                <text x="135" y="195" text-anchor="middle" font-size="10" fill="#999">22</text>
                                <text x="185" y="195" text-anchor="middle" font-size="10" fill="#999">2</text>
                                <text x="235" y="195" text-anchor="middle" font-size="10" fill="#999">6</text>
                                <text x="285" y="195" text-anchor="middle" font-size="10" fill="#999">10</text>
                                <text x="335" y="195" text-anchor="middle" font-size="10" fill="#999">14</text>
                                <text x="385" y="195" text-anchor="middle" font-size="10" fill="#999">18</text>

                                <!-- RR数据点（黄色三角形） -->
                                <polygon points="85,35 88,40 82,40" fill="#ffcc00"/>
                                <polygon points="100,35 103,40 97,40" fill="#ffcc00"/>
                                <polygon points="115,35 118,40 112,40" fill="#ffcc00"/>
                                <polygon points="130,35 133,40 127,40" fill="#ffcc00"/>
                                <polygon points="145,35 148,40 142,40" fill="#ffcc00"/>
                                <polygon points="160,35 163,40 157,40" fill="#ffcc00"/>
                                <polygon points="175,35 178,40 172,40" fill="#ffcc00"/>
                                <polygon points="190,35 193,40 187,40" fill="#ffcc00"/>

                                <!-- 紫色三角形数据点 -->
                                <polygon points="85,85 88,90 82,90" fill="#9c27b0"/>
                                <polygon points="100,85 103,90 97,90" fill="#9c27b0"/>
                                <polygon points="115,85 118,90 112,90" fill="#9c27b0"/>
                                <polygon points="130,85 133,90 127,90" fill="#9c27b0"/>
                                <polygon points="145,85 148,90 142,90" fill="#9c27b0"/>
                                <polygon points="160,85 163,90 157,90" fill="#9c27b0"/>
                                <polygon points="175,85 178,90 172,90" fill="#9c27b0"/>
                                <polygon points="190,85 193,90 187,90" fill="#9c27b0"/>

                                <!-- 蓝色三角形数据点 -->
                                <polygon points="85,135 88,140 82,140" fill="#2196f3"/>
                                <polygon points="100,135 103,140 97,140" fill="#2196f3"/>
                                <polygon points="115,135 118,140 112,140" fill="#2196f3"/>
                                <polygon points="130,135 133,140 127,140" fill="#2196f3"/>
                                <polygon points="145,135 148,140 142,140" fill="#2196f3"/>
                                <polygon points="160,135 163,140 157,140" fill="#2196f3"/>
                                <polygon points="175,135 178,140 172,140" fill="#2196f3"/>
                                <polygon points="190,135 193,140 187,140" fill="#2196f3"/>

                                <!-- 绿色三角形数据点 -->
                                <polygon points="85,175 88,180 82,180" fill="#4caf50"/>
                                <polygon points="100,175 103,180 97,180" fill="#4caf50"/>
                                <polygon points="115,175 118,180 112,180" fill="#4caf50"/>
                                <polygon points="130,175 133,180 127,180" fill="#4caf50"/>
                                <polygon points="145,175 148,180 142,180" fill="#4caf50"/>
                                <polygon points="160,175 163,180 157,180" fill="#4caf50"/>
                                <polygon points="175,175 178,180 172,180" fill="#4caf50"/>
                                <polygon points="190,175 193,180 187,180" fill="#4caf50"/>

                                <!-- PEEP标签和数值 -->
                                <text x="300" y="20" font-size="12" fill="#333">PEEP</text>
                                <text x="350" y="20" font-size="12" fill="#ff5722">P:002F</text>

                                <!-- 右侧刻度标签 -->
                                <text x="390" y="20" text-anchor="end" font-size="10" fill="#ff5722">50-180-+8</text>
                                <text x="390" y="50" text-anchor="end" font-size="10" fill="#ff5722">40-90-08</text>
                                <text x="390" y="80" text-anchor="end" font-size="10" fill="#ff5722">30-60-88</text>
                                <text x="390" y="110" text-anchor="end" font-size="10" fill="#ff5722">20-40-+6</text>
                                <text x="390" y="140" text-anchor="end" font-size="10" fill="#ff5722">10-20-29</text>
                                <text x="390" y="170" text-anchor="end" font-size="10" fill="#ff5722">0-0-0</text>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第三行：医嘱用药和检验指标 -->
            <div class="charts-row">
                <!-- 医嘱用药表格 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>医嘱用药</h4>
                    </div>
                    <div class="chart-content">
                        <div class="medication-table">
                            <div class="table-row">
                                <div class="table-cell">11-04 16:35 (临)</div>
                                <div class="table-cell">瑞芬太尼 10ml</div>
                                <div class="table-cell">很多备注</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">11-04 16:35 (长)</div>
                                <div class="table-cell">芬太尼 15ml</div>
                                <div class="table-cell">很多备注</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">11-04 16:35 (临)</div>
                                <div class="table-cell">瑞芬太尼 10ml</div>
                                <div class="table-cell">很多备注</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">11-04 16:35 (长)</div>
                                <div class="table-cell">芬太尼 15ml</div>
                                <div class="table-cell">很多备注</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">11-04 16:35 (临)</div>
                                <div class="table-cell">瑞芬太尼 10ml</div>
                                <div class="table-cell">很多备注</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">11-04 16:35 (长)</div>
                                <div class="table-cell">芬太尼 15ml</div>
                                <div class="table-cell">很多备注</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 检验指标表格 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>检验指标</h4>
                    </div>
                    <div class="chart-content">
                        <div class="lab-test-table">
                            <div class="table-row">
                                <div class="table-cell" style="color: blue;">红细胞</div>
                                <div class="table-cell">11-04 16:35</div>
                                <div class="table-cell">10 ml</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">总蛋白</div>
                                <div class="table-cell">11-04 16:35</div>
                                <div class="table-cell">15 ml</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell" style="color: blue;">红细胞</div>
                                <div class="table-cell">11-04 16:35</div>
                                <div class="table-cell">10 ml</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">总蛋白</div>
                                <div class="table-cell">11-04 16:35</div>
                                <div class="table-cell">15 ml</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell" style="color: blue;">红细胞</div>
                                <div class="table-cell">11-04 16:35</div>
                                <div class="table-cell">10 ml</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">总蛋白</div>
                                <div class="table-cell">11-04 16:35</div>
                                <div class="table-cell">15 ml</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第三行：血气分析和检查报告 -->
            <div class="charts-row">
                <!-- 血气分析表格 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>血气分析</h4>
                    </div>
                    <div class="chart-content">
                        <div class="medication-table">
                            <div class="table-row">
                                <div class="table-cell">氧合指数</div>
                                <div class="table-cell">11-04 17:34</div>
                                <div class="table-cell">108 mmHg</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">PaCO2</div>
                                <div class="table-cell">11-04 17:34</div>
                                <div class="table-cell">205 mmHg</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">氧合指数</div>
                                <div class="table-cell">11-04 17:34</div>
                                <div class="table-cell">108 mmHg</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">PaCO2</div>
                                <div class="table-cell">11-04 17:34</div>
                                <div class="table-cell">205 mmHg</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">氧合指数</div>
                                <div class="table-cell">11-04 17:34</div>
                                <div class="table-cell">108 mmHg</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">PaCO2</div>
                                <div class="table-cell">11-04 17:34</div>
                                <div class="table-cell">205 mmHg</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 检查报告表格 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>检查报告</h4>
                    </div>
                    <div class="chart-content">
                        <div class="lab-test-table">
                            <div class="table-row">
                                <div class="table-cell">超声检查</div>
                                <div class="table-cell">11-04 17:34</div>
                                <div class="table-cell"></div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell" style="padding-left: 20px;"></div>
                                <div class="table-cell"></div>
                                <div class="table-cell"></div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell"></div>
                                <div class="table-cell"></div>
                                <div class="table-cell"></div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell" style="padding-left: 20px;"></div>
                                <div class="table-cell"></div>
                                <div class="table-cell"></div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell"></div>
                                <div class="table-cell"></div>
                                <div class="table-cell"></div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell" style="padding-left: 20px;"></div>
                                <div class="table-cell"></div>
                                <div class="table-cell"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第四行：CRRT和导管 -->
            <div class="charts-row">
                <!-- CRRT表格 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>CRRT</h4>
                    </div>
                    <div class="chart-content">
                        <div class="medication-table">
                            <div class="table-row header-row">
                                <div class="table-cell">时间</div>
                                <div class="table-cell">体征</div>
                                <div class="table-cell">尿量</div>

                                <div class="table-cell">超滤</div>
                                <div class="table-cell">检测记录</div>
                                <div class="table-cell">签名</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell">HR:106 BP...</div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">300</div>
                                <div class="table-cell">治疗中</div>
                                <div class="table-cell">古力娜扎多西</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell">HR:106 BP...</div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">300</div>
                                <div class="table-cell">治疗中</div>
                                <div class="table-cell">古力娜扎多西</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell">HR:106 BP...</div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">300</div>
                                <div class="table-cell">治疗中</div>
                                <div class="table-cell">古力娜扎多西</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell">HR:106 BP...</div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">300</div>
                                <div class="table-cell">治疗中</div>
                                <div class="table-cell">古力娜扎多西</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell">HR:106 BP...</div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">300</div>
                                <div class="table-cell">治疗中</div>
                                <div class="table-cell">古力娜扎多西</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell">HR:106 BP...</div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">300</div>
                                <div class="table-cell">治疗中</div>
                                <div class="table-cell">古力娜扎多西</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 导管表格 -->
                <div class="chart-card">
                    <div class="chart-header">
                        <h4>导管</h4>
                    </div>
                    <div class="chart-content">
                        <div class="lab-test-table">
                            <div class="table-row header-row">
                                <div class="table-cell">导管名称</div>
                                <div class="table-cell">状态</div>
                                <div class="table-cell">置管时间</div>
                                <div class="table-cell">拔管时间</div>
                                <div class="table-cell">天数</div>
                                <div class="table-cell">皮肤</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">导尿管</div>
                                <div class="table-cell">插管中</div>
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell"></div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">一场</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">导尿管</div>
                                <div class="table-cell">插管中</div>
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell"></div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">一场</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">导尿管</div>
                                <div class="table-cell">插管中</div>
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell"></div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">一场</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">导尿管</div>
                                <div class="table-cell">插管中</div>
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell"></div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">一场</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">导尿管</div>
                                <div class="table-cell">插管中</div>
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell"></div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">一场</div>
                            </div>
                            <div class="table-row">
                                <div class="table-cell">导尿管</div>
                                <div class="table-cell">插管中</div>
                                <div class="table-cell">2025/11/4</div>
                                <div class="table-cell"></div>
                                <div class="table-cell">12</div>
                                <div class="table-cell">一场</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 监护数据页面 - 初始隐藏 -->
            <div id="monitorDataContent" class="monitor-data-container" style="display: none;">
                <div class="card">
                    <div class="card-header">
                        <h4>监护数据详情</h4>
                    </div>
                    <div class="card-body">
                        <p>这里显示患者的详细监护数据信息。</p>
                        <p>可以添加各种监护指标的详细表格、趋势图等。</p>
                    </div>
                </div>
            </div>
            </div>
            <!-- 首页内容结束 -->
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取菜单元素和内容容器
        const menuItems = document.querySelectorAll('.menu-item');
        const contentDisplay = document.querySelector('.content-display');

        // 菜单项与对应的 Action 映射
        const menuActionMap = {
            '首页': 'Home',
            '监护数据': 'MonitorData',
            '皮肤': 'Skin',
            '导管': 'Catheter',
            '护理记录单': 'NursingRecord',
            '护理文书': 'NursingDocument',
            '体温单': 'Temperature',
            '重症评分': 'CriticalScore',
            '预警信息': 'WarningInfo',
            '收费单明细': 'BillingDetail',
            '每日质控': 'DailyQualityControl'
        };

        // 初始化患者信息
        document.getElementById('patientBedNo').textContent = '05';
        document.getElementById('patientName').textContent = '李志法';
        document.getElementById('patientInHosNo').textContent = '24003329001';
        document.getElementById('patientInDateTime').textContent = '2024-06-24 17:15';
        document.getElementById('patientChiefDoctor').textContent = '--';
        document.getElementById('patientChargeNurse').textContent = '王小燕';

        // 动态加载内容的函数
        function loadContent(actionName, bedNo) {
            // 显示加载动画
            showLoading();

            // 构建请求 URL
            const url = `/Patients/Load${actionName}?bedNo=${encodeURIComponent(bedNo)}`;

            // 使用 Fetch API 加载内容
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.text();
                })
                .then(html => {
                    // 隐藏加载动画
                    hideLoading();

                    // 移除旧的动态内容（如果存在）
                    const oldDynamicContent = contentDisplay.querySelector('.dynamic-content');
                    if (oldDynamicContent) {
                        oldDynamicContent.remove();
                    }

                    // 创建新的动态内容容器
                    const dynamicDiv = document.createElement('div');
                    dynamicDiv.className = 'dynamic-content';
                    dynamicDiv.innerHTML = html;

                    // 添加到内容区域
                    contentDisplay.appendChild(dynamicDiv);

                    // 添加淡入动画
                    dynamicDiv.classList.add('fade-in');
                    setTimeout(() => {
                        dynamicDiv.classList.remove('fade-in');
                    }, 300);
                })
                .catch(error => {
                    hideLoading();
                    console.error('加载内容失败:', error);
                    contentDisplay.innerHTML = `
                        <div style="padding: 40px; text-align: center;">
                            <h4 style="color: #e74c3c;">加载失败</h4>
                            <p style="color: #7f8c8d;">无法加载内容,请稍后重试</p>
                        </div>
                    `;
                });
        }

        // 显示加载动画
        function showLoading() {
            const loadingHtml = `
                <div class="loading-overlay">
                    <div class="loading-spinner"></div>
                </div>
            `;
            contentDisplay.style.position = 'relative';
            contentDisplay.insertAdjacentHTML('beforeend', loadingHtml);
        }

        // 隐藏加载动画
        function hideLoading() {
            const loadingOverlay = contentDisplay.querySelector('.loading-overlay');
            if (loadingOverlay) {
                loadingOverlay.remove();
            }
        }

        // 添加菜单点击事件
        menuItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有活动状态
                menuItems.forEach(i => i.classList.remove('active'));

                // 添加当前活动状态
                this.classList.add('active');

                // 获取菜单文本（排除图标元素）
                let menuText = '';
                for (let node of this.childNodes) {
                    if (node.nodeType === Node.TEXT_NODE) {
                        menuText += node.textContent;
                    }
                }
                menuText = menuText.trim();

                const actionName = menuActionMap[menuText];

                // 获取床位号
                const urlParams = new URLSearchParams(window.location.search);
                const bedNo = urlParams.get('bedNo') || '03';

                console.log('点击菜单:', menuText, '对应Action:', actionName); 

                // 如果点击的是"首页",显示硬编码的首页内容
                if (menuText === '首页') {
                    const homeContent = document.getElementById('homeContent');
                    console.log('homeContent 元素:', homeContent); 

                    if (homeContent) {
                        homeContent.style.display = 'block';
                        console.log('首页内容已显示'); 

                        // 隐藏动态加载的内容
                        const dynamicContent = contentDisplay.querySelector('.dynamic-content');
                        if (dynamicContent) {
                            dynamicContent.remove();
                            console.log('动态内容已移除');
                        }
                    } else {
                        console.error('未找到 homeContent 元素！'); 
                    }
                    // 滚动到顶部
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                } else if (actionName) {
                    // 其他菜单项：隐藏首页内容,动态加载新内容
                    const homeContent = document.getElementById('homeContent');
                    if (homeContent) {
                        homeContent.style.display = 'none';
                    }
                    loadContent(actionName, bedNo);
                } else {
                    console.warn('未找到对应的菜单项:', menuText);
                }
            });
        });
    });
</script>

<script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 从URL获取患者ID或床位号
        const urlParams = new URLSearchParams(window.location.search);
        const bedNo = urlParams.get('bedNo') || '';

        if (bedNo) {
            // 加载床位号对应的患者详细信息
            loadPatientData(bedNo);
        }
    });

        // 加载患者数据
        function loadPatientData(bedNo) {
            // 发送AJAX请求获取患者数据
            fetch('/Patients/GetPatientDetail?bedNo=' + encodeURIComponent(bedNo))
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success && data.data) {
                        // 更新患者信息
                        updatePatientInfo(data.data);
                    }
                })
                .catch(error => {
                    // 生产环境移除错误日志
                });
        }

        // 更新患者信息
        function updatePatientInfo(patientData) {
            // 获取危急程度对应的CSS类
            function getDangerLevelClass(dangerLevel) {
                if (!dangerLevel) return 'text-warning';

                switch (dangerLevel.trim()) {
                    case '病情危重':
                    case '病情严重':
                        return 'text-danger';
                    case '病情较重':
                    case '病情较轻':
                    case '病情稳定':
                        return 'text-warning';
                    case '基本痊愈':
                        return 'text-success';
                    case '死亡':
                        return 'text-secondary';
                    default:
                        return 'text-warning';
                }
            }

            const dangerClass = getDangerLevelClass(patientData.dangerLevel);

            // 更新患者基本信息
            document.getElementById('patientBedNo').textContent = patientData.displayBedNo || patientData.bedNo || '--';
            document.getElementById('patientBedNo').className = `info-value ${dangerClass} font-weight-bold`;
            document.getElementById('patientName').textContent = patientData.patientName || '--';
            document.getElementById('patientInHosNo').textContent = patientData.inHosNo || '--';
            document.getElementById('patientInDateTime').textContent = patientData.inDateTime ? formatDateTime(patientData.inDateTime) : '--';
            document.getElementById('patientChiefDoctor').textContent = patientData.chiefDoctor || '--';
            document.getElementById('patientChargeNurse').textContent = patientData.chargeNurse || '--';
        }

        // 格式化日期时间
        function formatDateTime(dateTime) {
            if (!dateTime) return '';
            const date = new Date(dateTime);
            return date.getFullYear() + '-' +
                   String(date.getMonth() + 1).padStart(2, '0') + '-' +
                   String(date.getDate()).padStart(2, '0') + ' ' +
                   String(date.getHours()).padStart(2, '0') + ':' +
                   String(date.getMinutes()).padStart(2, '0');
        }

        // 菜单点击事件
        const menuItems = document.querySelectorAll('.menu-item');
        menuItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有活动状态
                menuItems.forEach(menuItem => menuItem.classList.remove('active'));
                // 添加当前活动状态
                this.classList.add('active');
                // 这里可以根据菜单项加载不同的内容
            });
        });



        // 页面加载动画
        const elements = document.querySelectorAll('.data-card, .patient-header');
        elements.forEach((element, index) => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(20px)';

            setTimeout(() => {
                element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }, 100 * index);
        });
</script>
